<template>
  <div class="mine-container">
    <div class="order-all" v-for="order in orderList" :key="order.foodName">
      <div class="order-table">
        <div class="order-card" v-for="(item,index) in order" :key="index">
          <div class="food-img">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="order-message">
            <span class="food-name">{{item.foodName}}</span>
            <span class="food-price">¥ {{item.price}}</span>
            <span class="food-count">×{{item.count}}</span>
          </div>
        </div>
        <button class="delete-btn" @click="deleteOrder(order[0].orderId)">删除订单</button>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      orderList: []
    }
  },
  methods: {
    deleteOrder(orderId) {
      console.log(orderId);
      this.request({
        url:'/deleteOrder',
        method:'POST',
        data:{
          orderId
        }
      }).then(res=>{
        alert('删除成功')
        // refresh page
        location.reload()
        console.log(res);
      })
    }
  },
  created() {
    console.log(this);
    this.request({
      url: '/getAllOrders',
      method: 'GET',
      params: {
        username: this.$store.state.username||localStorage.getItem('username')
        // username:'19179326157'
      }
    }).then(res => {
      console.log(res)
      this.orderList=res.data
    })
  }
}
</script>
<style lang="less" scoped>
.mine-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  // 记住，对于高度来说，如果使用vh，应该设置最小高度为100vh才能铺满全屏，因为高度时会自适应改变的，而宽度一般不变。
  min-height: 100vh;
  background-color: #f3efef;
  text-align: center;
}
.order-all {
  width: 500px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
}
.order-table {
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .order-card {
    width: 400px;
    padding: 10px 40px 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .food-img {
      flex: 1;
      height: 95px;
      margin-right: 20px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        border: 1px solid #ccc;
      }
    }
    .order-message {
      flex: 3;
      height: 80px;
      position: relative;
      .food-name {
        float: left;
      }
      .food-price {
        float: right;
      }
      .food-count {
        position: absolute;
        left: 10px;
        bottom: 10px;
      }
    }
  }
  .delete-btn{
    position: absolute;
    right:20px;
    bottom: 10px;
    width: 100px;
    height: 40px;
    color:rgb(65, 52, 52);
    background-color: #fff;
    border: 1px solid rgb(219, 147, 39);
    border-radius: 20px;
    cursor: pointer;
    &:hover {
       opacity:.7;
    }
  }
}
</style>
